<template>
  <div>
    <div style="margin-bottom: 10px">
      <img class="img" src="../../../assets/images/PetCare/u0.png" alt="">
    </div>
    <div class="content">
      <el-tabs type="card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="发布领养信息" name="first">
          <FirstComponent></FirstComponent>
        </el-tab-pane>
        <el-tab-pane label="已发布" name="second">
          <SecondComponent></SecondComponent>
        </el-tab-pane>
        <el-tab-pane label="未通过" name="third">
          <ThirdComponent></ThirdComponent>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FirstComponent from './Components/first.vue'
import SecondComponent from './Components/second.vue'
import ThirdComponent from './Components/third.vue'


const activeName = ref('first')

const handleClick = (tab, event) => {
  // console.log(tab, event)
}

</script>

<style scoped>
.img {
  width: 100%;
  height: 600px;
}

.content {
  padding: 0 180px;
}
:deep(.el-tabs__item.is-active) {
  background-color: rgb(9,193,153);
  color: white;
}
:deep(.el-tabs--card .el-tabs__header .el-tabs__nav) {
  width: 100%;
  height: 60px;
  font-size: 24px;
}
:deep(.el-tabs__item) {
  width: 33%;
}
:deep(.is-top) {
  height: 60px!important;
  font-size: 24px;
}


</style>
